<template>
    <div class="chart-wrap">
       <div class="title">
          <span v-text="name"></span>
          <div class="tools">
            <el-select v-model="query.topnumber" placeholder="请选择">
              <el-option
                v-for="item in dateTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker
              v-model="query.startDate"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-date-picker
              v-model="query.endDate"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
       </div>
       <div class="chart">
           <div ref="chart" class="content" ></div>
       </div>
    </div>
</template>

<script>
    import mixin from '../mixs/mixin.js';
    import echarts from "echarts";
    export default {
        name: "chart_1" ,
        mixins: [mixin],
        props: {
          name: {
            type: String,
            default: '表名称'
          },
          category:{
            type: String,
            default: 'news' //分类 news,paper,patent
          }
        },
        data() {
          let startDate = new Date(`${new Date().getFullYear()}/1/1`).Format('yyyy-MM-dd');
          let endDate = new Date().Format('yyyy-MM-dd');
          return {
            apiUrl:'newtechanalyse/hotWordDevelopmentTrend',
            dateTypeList:[
              {label:'10',value:'10'},
              {label:'20',value:'20'}
            ],
            query:{
              // startDate:startDate, //开始时间
              // endDate:endDate, //结束时间
              topnumber:'10', //Month,Day 查询时间类型
              category:this.category, //分类 News,Paper,Patent
            },
            xData:[],
            yData:[],
            datas:[]
          }
        },
        mounted(){
          this._initChart();
        },
        methods: {
          _initChart() {
             this.$nextTick(()=>{
                 if(!this._vmEchart){
                   this._vmEchart = echarts.init(this.$refs.chart);
                   this._vmEchart.showLoading();
                 }
             })
          },
          asyncDate(){
            //  异步加载数据  通用方法
            if(!this._vmEchart) return;
            this._vmEchart.clear();
            this._vmEchart.showLoading();
            this.api({
              url: this.apiUrl,
              method: "post",
              data:this.$qs.stringify({...this.query,topicId:this.navCurrentId})
            }).then(data => {
               this._formatDate(data)
            });
          },
          getDataURL(){
            // 获取图片base64
            return new Promise((resolve,reject)=>{
              if(!this._vmEchart){reject(); return; }
              resolve(this._vmEchart.getDataURL({
                backgroundColor: this.exportEchartBg
              }))
            });
          },
          _formatDate(data){
            // 根据不同的数据 配合不同的方法
            let xData = [];
            let yData = [];
            let datas = [];
            yData = Object.keys(data.hotwordNums);
            xData = data.years;
            xData.forEach((itemX,_indexX)=>{
               yData.forEach((itemY,_indexY)=>{
                   let item = [];
                   item[0] = _indexX;
                   item[1] = _indexY;
                   item[2] = data.hotwordNums[itemY][_indexX];
                   datas.push(item)
               })
            });
            console.log(datas);
            this.xData = xData;
            this.yData = yData;
            this.datas = datas;
            this._setOption();
          },
          _setOption(){
             let $this = this;
             let option = {
                 color:['#00a3fa'],
                 legend: {
                   left: 'right'
                 },
                 tooltip: {
                   position: 'top',
                   formatter: function (params) {
                     console.log(params);
                     return params.value[2] + ' commits in ' + $this.yData[params.value[1]] + ' of ' + $this.xData[params.value[0]];
                   }
                 },
                 grid: {
                   left: 2,
                   bottom: 10,
                   right: 10,
                   containLabel: true
                 },
                 xAxis: {
                   type: 'category',
                   data: this.xData,
                   boundaryGap: false,
                   splitLine: {
                     show: true,
                     lineStyle: {
                       color: '#999',
                       type: 'dashed'
                     }
                   },
                   axisLine: {
                     show: false
                   },
                   axisLabel: {
                     show:true,
                     color: "#000", //坐标轴名称颜色
                     interval:0,
                   }
                 },
                 yAxis: {
                   type: 'category',
                   data: this.yData,
                   axisLine: {
                     show: false
                   }
                 },
                 series: [{
                   name: this.category == 'news' ? '新闻' :  this.category == 'paper' ? '技术' :   this.category == 'patent' ? '专利' : '' ,
                   type: 'scatter',
                   symbolSize: function (val) {
                     if(val[2]){
                       if (val[2] * 2 < 15) {
                         return 15
                       } else {
                         return val[2] * 2;
                       }
                     }else{
                       return null
                     }
                   },
                   data: this.datas,
                   animationDelay: function (idx) {
                     return idx * 5;
                   }
                  }
                 ]
               };

              this._vmEchart.hideLoading();
              this._vmEchart.setOption(option)
          }
        },


    }
</script>

<style lang="scss" scoped>
    .chart{
      position: relative;
      .content{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }

</style>
